<template>
	<view class="tool-header">
		<view class="back-button" @tap="goBack">
			<text class="back-icon">←</text>
		</view>
		<view class="header-info">
			<text class="tool-icon">{{ icon }}</text>
			<text class="tool-title">{{ title }}</text>
			<text class="tool-subtitle">{{ subtitle }}</text>
		</view>
		<view class="header-actions" v-if="showActions">
			<view class="action-button" @tap="onShare" v-if="showShare">
				<text class="action-icon">📤</text>
			</view>
			<view class="action-button" @tap="onFavorite" v-if="showFavorite">
				<text class="action-icon">{{ favorited ? '❤️' : '🤍' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ToolHeader',
	props: {
		icon: {
			type: String,
			required: true
		},
		title: {
			type: String,
			required: true
		},
		subtitle: {
			type: String,
			default: ''
		},
		showActions: {
			type: Boolean,
			default: false
		},
		showShare: {
			type: Boolean,
			default: false
		},
		showFavorite: {
			type: Boolean,
			default: false
		},
		favorited: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		
		onShare() {
			this.$emit('share')
		},
		
		onFavorite() {
			this.$emit('favorite', !this.favorited)
		}
	}
}
</script>

<style lang="scss" scoped>
.tool-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 40rpx;
	padding: 0 8rpx;
	
	.back-button {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 40rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.95);
			background-color: rgba(255, 255, 255, 0.8);
		}
		
		.back-icon {
			font-size: 32rpx;
			color: #000000;
			font-weight: bold;
		}
	}
	
	.header-info {
		flex: 1;
		text-align: center;
		padding: 0 24rpx;
		
		.tool-icon {
			font-size: 64rpx;
			margin-bottom: 8rpx;
			display: block;
		}
		
		.tool-title {
			display: block;
			font-size: 40rpx;
			font-weight: bold;
			color: #000000;
			margin-bottom: 8rpx;
			text-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.8);
		}
		
		.tool-subtitle {
			display: block;
			font-size: 26rpx;
			color: rgba(0, 0, 0, 0.7);
			text-shadow: 0 1rpx 4rpx rgba(255, 255, 255, 0.6);
		}
	}
	
	.header-actions {
		display: flex;
		align-items: center;
		gap: 16rpx;
		
		.action-button {
			width: 72rpx;
			height: 72rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(255, 255, 255, 0.9);
			border-radius: 36rpx;
			box-shadow: 0 3rpx 12rpx rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.95);
				background-color: rgba(255, 255, 255, 0.8);
			}
			
			.action-icon {
				font-size: 28rpx;
			}
		}
	}
}
</style>